<template>
    <div class="role_box">
        <h1 class="role_title">用户管理</h1>
        <div class="operate_box">
            <el-button type="primary" plain @click="addRole">新增</el-button>
        </div>
        <el-table
            :data="inTableData"
            style="width: 100%">
            <el-table-column
                prop="code"
                label="编码">
            </el-table-column>
            <el-table-column
                prop="username"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="sexText"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="statusText"
                label="状态">
            </el-table-column>
            <el-table-column
                prop="photo"
                label="头像">
            </el-table-column>
            <el-table-column
                prop="rolename"
                label="角色">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="operation"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="distributeRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    分配角色
                    </el-button>
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    移除
                    </el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="新增用户"
            :visible.sync="dialogVisible"
            width="30%"
            >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-switch
                        v-model="form.sex"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="男"
                        inactive-text="女">
                    </el-switch>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch
                        v-model="form.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="正常"
                        inactive-text="注销">
                    </el-switch>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.photo" :src="form.photo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAddRole">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="分配角色"
            :visible.sync="ifDistribution"
            width="30%"
            >
            <el-table
                ref="singleTable"
                :data="roletable"
                highlight-current-row
                @current-change="handleSelectionChange">
                <el-table-column
                    prop="id"
                    label="ID">
                </el-table-column>
                <el-table-column
                    prop="typename"
                    label="角色名称">
                </el-table-column>
            </el-table>
            <div class="dis_optbox">
                 <el-button type="primary" @click="sureDistribute">确定分配</el-button>
                 <el-button @click="ifDistribution = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    computed:{
        inTableData(){
            return this.tableData.map(item =>{
                item.sexText = item.sex == 0?'男':'女';
                item.statusText = item.status == 0?'正常':'注销'
                return item
            })
        }
    },
    data(){
        return {
            tableData:[{
                code:'H2102475',
                username:'王超',
                sex:0,
                status:0,
                photo:'',
                rolename:'',
                roleid:'',
                createTime:'2019-11-18',
            }],
            roleUseStatus:[
                {
                    id:0,
                    name:'应用'
                },
                {
                    id:1,
                    name:'隐藏'
                }
            ],
            dialogVisible:false,
            form:{
                code:'',
                username:'',
                sex:true,
                status:true,
                photo:'',
                createTime:''
            },
            ifDistribution:false,
            roletable:[{
                id:1,
                typename:'超级管理员',
            },
            {
                id:2,
                typename:'工程师',
            },
            {
                id:3,
                typename:'助理'
            }],
            chooseTemp:{}
        }
    },
    methods:{
        addRole(){
            this.dialogVisible = true;
            
        },
        submitAddRole(){
            let today = new Date();
            let y = today.getFullYear();
            let m = today.getMonth() + 1;
            let d = today.getDate();
            this.form.createTime = y+'-'+m+'-'+d
            this.form.status = this.form.status?0:1
            this.form.sex = this.form.status?0:1
            this.form.code = 'H'+this.randomn(7);
            this.tableData.push(this.form)
            this.dialogVisible = false;
            //清空新增表单
            this.form = {
                code:'',
                username:'',
                sex:true,
                status:true,
                photo:'',
                createTime:''
            }
        },
        deleteRow(index, tableData){
            tableData.splice(index,1);
        },
        randomn(n) {
            if (n > 21) return null
            return parseInt((Math.random() + 1) * Math.pow(10,n-1))
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        distributeRow(index ,tabledata){
            this.ifDistribution = true;
            this.chooseTemp = tabledata[index]
            this.chooseTemp.index = index;
        },
        handleSelectionChange(val){
            console.log(val)
           let chooseTemp = this.chooseTemp;
           chooseTemp.rolename = val.typename;
           chooseTemp.roleid = val.id;
           this.chooseTemp = chooseTemp;
           this.tableData[chooseTemp.index] = chooseTemp;
        },
        sureDistribute(){
            this.ifDistribution = false;    
        }

    }
}
</script>
<style  scoped>
.role_title{
    font-family: "微软雅黑",Arial,sans-serif,"PingFang SC";
    padding: 10px 0;
    background-color: #f0f0f0;
}
.operate_box{
    text-align: right;
    padding: 15px 0;
    border:1px solid #f0f0f0;
    border-top:0;
}
.operate_box>div{
    display: inline-block;
}
.el-table{
    margin-top:15px;
}
.el-dialog{
    border-radius: 10px;
}
.el-form{
    width:80%;
    margin:0 auto;
}
.el-form-item .el-form-item__content{
    text-align: left;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .dis_optbox{
      margin-top:10px;
      display: flex;
      justify-content:flex-end;
  }
</style>